<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <style>
        body{
            border:3px solid black;
            padding:100px;
        }
        ul,li{
            margin-left: 0;
            margin-bottom: 0;
            padding-left: 0;
            border:3px solid orangered;
        }
        .nav ul li{
            /*
            list-style-type:
               lower-roman  小写罗马数字
               upper-roman  大写罗马数字
               lower-alpha  小写英文字母
               upper-alpha  大写英文字母
               decimal  十进制数字
               disc  实心圆(默认值)
               square 实心正方形
               circle  空心圆
            */
            /*list-style-type:circle;
            list-style-image: url("images/right-arrow.png");*/
            /*list-style-position: outside;*/
            border:1px solid red;

            list-style:square outside url('images/eg_arrow.gif');
        }
        .menu ul li {
            /*list-style-position: inside;*/
            border:1px solid green;
            list-style:square outside url('images/eg_arrow.gif');

        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#">网站首页</a></li>
        <li><a href="#">网页制作</a></li>
        <li><a href="#">网络编程</a></li>
        <li><a href="#">脚本专栏</a></li>
        <li><a href="#">数据库</a></li>
        <li><a href="#">服务器</a></li>
        <li><a href="#">软件下载</a></li>
        <li><a href="#">操作系统</a></li>
        <li><a href="#">网站运营</a></li>
        <li><a href="#">脚本下载</a></li>
    </ul>
</div>
<!--

div.menu>ul>li*8>a[href="#"]>{item$}
-->
<div class="menu">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">学校简介</a></li>
        <li><a href="#">热门专业</a></li>
        <li><a href="#">金牌师资</a></li>
        <li><a href="#">高薪就业</a></li>
        <li><a href="#">新闻资讯</a></li>
        <li><a href="#">校园生活</a></li>
        <li><a href="#">精彩视频</a></li>
    </ul>
</div>
</body>
</html>